<template>
	<view class="container">
		<u-form :model="form" label-width="120">
			<u-form-item label="属性名">
				<u-input v-model="form.productAttrName" placeholder="请输入属性名" />
			</u-form-item>
			<u-form-item label="属性值">
				<u-input v-model="form.productAttrValue" placeholder="请输入属性值" />
			</u-form-item>
		</u-form>
		<view class="tips">* 商品参数是用于描述商品的属性。例如手机核数、版本等额外信息.<text style="color: #1F6ECF;padding-left: 10rpx;"
				@click="viewExample">点击查看示例</text></view>
		<view class="footer">
			<u-button type="primary" class="btn" @click="submit()">保存</u-button>
		</view>
		<u-modal v-model="show" :show-title="false" :mask-close-able="true" confirm-text="我已了解" confirm-color="#1F6ECF">
			<view class="slot-content">
				<u-image src="@/static/shoping/example.png" mode="widthFix"></u-image>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					productId: '',
					productAttrName: '', //属性名
					productAttrValue: '', //属性值
				},
				attr: []
			}
		},
		onLoad(option) {
			if (option.id) {
				uni.setNavigationBarTitle({
					title: "编辑参数"
				});
				this.form.id = option.id;
				this.form.productAttrName = option.productAttrName;
				this.form.productAttrValue = option.productAttrValue;
			}
			this.form.productId = option.productId;
		},
		methods: {
			submit() {
				var _this = this;
				if (_this.form.id) {
					this.attr.push(_this.form);
					_this.$u.api.editAttrValue(this.attr).then(res => {
						if (res.code == 0) {
							_this.$u.toast('修改成功！');
							setTimeout(function() {
								let pages = getCurrentPages();
								let currPage = pages[pages.length - 2];
								currPage.$vm.getData();
								uni.navigateBack()
							}, 1500)
						} else {
							_this.$u.toast('修改失败！' + res.msg);
						}
					})
				} else {
					this.attr.push(_this.form);
					_this.$u.api.addAttrValue(this.attr).then(res => {
						if (res.code == 0) {
							_this.$u.toast('添加成功！');
							setTimeout(function() {
								let pages = getCurrentPages();
								let currPage = pages[pages.length - 2];
								currPage.$vm.getData();
								uni.navigateBack()
							}, 1500)
						} else {
							_this.$u.toast('添加失败！' + res.msg);
						}
					})
				}
			},
			viewExample() {
				this.show = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;

		.tips {
			color: red;
			font-size: 26rpx;
			padding-top: 30rpx;
		}

		.footer {
			margin-top: 60rpx;

			.btn {
				background: #1F6ECF;
				box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32);
				border-radius: 43rpx;
			}
		}
	}
</style>
